<template>
    <view class="gy-swiper">
        <swiper class="gy-swiper-box" :current="current" :circular="true" :indicator-dots="false" :autoplay="true" @change="changeFn">
            <swiper-item class="gy-swiper-box-item" v-for="(item,index) in props.list" :key="index">
                <com-image :src="item.url" :mode="props.mode" />
            </swiper-item>
        </swiper>
        <view v-if="props.indicator" class="gy-swiper-indicator">
            <view :class="{selected: current === index}" v-for="(item,index) in props.list" :key="index"></view>
        </view>
    </view>
</template>

<script lang="ts" setup>

    import {
    	ref,
    	computed,
    	onMounted
    } from "vue";

    interface SwiperData {
        url: string;
        type?: string;
    }

    const emits = defineEmits(["command", "openPlugin"]);
    const props = defineProps({
    	list: Array as () => Array<SwiperData>,
        indicator: {
            type: Boolean,
            default: true
        },
        mode: {
            type: String,
            default: "heightFix"
        }
    });

    const current = ref(0);

    function changeFn(item: any){
        current.value = item.detail.current;
    }
    function previewFn(path: any){
        let urls: Array<string> = [];
        props.list.forEach((item: SwiperData) => {
            urls.push(item.url);
        });
		uni.previewImage({
		    current: path,
		    urls: urls
		})
    }

</script>

<style lang="scss" scoped>
	.gy-swiper{
	    width: 100%;
	    .gy-swiper-box{
	        width: 100%;
	        height: calc(100vw);

	        .gy-swiper-box-item{
	            width: 100%;
	            display: flex;
	            justify-content: center;
	            align-items: center;
	            image{
	                display: block;
	                max-height: 80%;
	            }
	        }
	    }
	    .gy-swiper-indicator{
			margin-top: 10rpx;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        view{
	            margin: 0 10px;
	            width: 30px;
	            height: 8px;
	            border-radius: 5px;
	            background-color: #E8EEFB;
	        }
	        view.selected{
	            background-color: var(--gy-color-primary);
	        }
	    }
	}
</style>
